<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>04-事件修饰符</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>
        .page-header {
            width: 400px;
            background-color: skyblue;
            padding: 30px;
        }

        h1 {
            background-color: #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="demo">
        <div class="container">
            <h3>事件处理-事件修饰符</h3>

            <form class="from" action="http://www.atguigu.com">
                <!-- 1.0 阻止默认行为的事件修饰符 -->
                <button class="btn btn-success" @click.prevent="fn1">阻止默认行为</button>
            </form>

            <div class="page-header" @click="father">
                <!-- 2.0 阻止冒泡事件的传播 -->
                <h1 @click.stop="son">欢迎来到尚硅谷</h1>
            </div>

            <form class="from" action="http://www.atguigu.com">
                <!-- 3.0 事件的修饰符是可以串联使用的 -->
                <button class="btn btn-success" @click.prevent.once="fn1">点击去学习</button>
            </form>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {},
            methods: {
                fn1(e) {
                    // e.preventDefault()
                    console.log(100)
                },
                son(e) {
                    // e.stopPropagation()
                    console.log('执行了标题的事件')
                },
                father() {
                    console.log('哈哈哈哈哈哈')
                }
            }
        })
    </script>
</body>
</html>